<template>
  <a-row class="playedu-main-body">
    <a-col>
      <div class="float-left mb-24">
        <BackBartment title="修改密码" />
      </div>
      <div class="float-left">
        <a-form
          ref="form"
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          style="width: 600px"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
          autocomplete="off"
        >
          <a-form-item
            label="原密码"
            name="old_password"
            :rules="[{ required: true, message: '请输入原密码!' }]"
          >
            <a-input-password
              v-model:value="formState.old_password"
              placeholder="请输入原密码"
              allow-clear
            />
          </a-form-item>

          <a-form-item
            label="新密码"
            name="new_password"
            :rules="[{ required: true, message: '请输入新密码!' }]"
          >
            <a-input-password
              v-model:value="formState.new_password"
              placeholder="请输入新密码"
              allow-clear
            />
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button type="primary" html-type="submit">保存</a-button>
            <a-button class="ml-15" html-type="button" @click="goBack">取消</a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { login } from "@/api/index";
import BackBartment from "@/components/Common/back-bar.vue";

const form = ref();
const formState = reactive({
  old_password: "",
  new_password: ""
});

const router = useRouter();

const onFinish = (values: any) => {
  login.passwordChange(values.old_password, values.new_password).then(() => {
    message.success("保存成功！");
    router.back();
  });
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

const goBack = () => {
  router.back();
};
</script>

<style scoped>
</style>
